<template>
    <div class="login">
        <canvas id="txt"></canvas>
        <canvas id="loginBj"></canvas>
        <div id="china">
            <img src="../images/map/xinjiang.png" alt="" class="xinjiang">
            <img src="../images/map/xizang.png" alt="" class="xizang">
            <img src="../images/map/qinghai.png" alt="" class="qinghai">
            <img src="../images/map/gansu.png" alt="" class="gansu">
            <img src="../images/map/sichuan.png" alt="" class="sichuan">
            <img src="../images/map/yunnan.png" alt="" class="yunnan">
            <img src="../images/map/neimeng.png" alt="" class="neimeng">
            <img src="../images/map/neimeng.png" alt="" class="neimeng">
            <img src="../images/map/ningxia.png" alt="" class="ningxia">
            <img src="../images/map/shanxi.png" alt="" class="shanxi">
            <img src="../images/map/chongqing.png" alt="" class="chongqing">
            <img src="../images/map/guizhou.png" alt="" class="guizhou">
            <img src="../images/map/guangxi.png" alt="" class="guangxi">
            <img src="../images/map/shanxi2.png" alt="" class="shanxi2">
            <img src="../images/map/hebei.png" alt="" class="hebei">
            <img src="../images/map/beijing.png" alt="" class="beijing">
            <img src="../images/map/tianjin.png" alt="" class="tianjin">
            <img src="../images/map/heilongjiang.png" alt="" class="heilongjiang">
            <img src="../images/map/jilin.png" alt="" class="jilin">
            <img src="../images/map/liaoning.png" alt="" class="liaoning">
            <img src="../images/map/henan.png" alt="" class="henan">
            <img src="../images/map/shandong.png" alt="" class="shandong">
            <img src="../images/map/hubei.png" alt="" class="hubei">
            <img src="../images/map/anhui.png" alt="" class="anhui">
            <img src="../images/map/jiangsu.png" alt="" class="jiangsu">
            <img src="../images/map/hunan.png" alt="" class="hunan">
            <img src="../images/map/jiangxi.png" alt="" class="jiangxi">
            <img src="../images/map/zhejiang.png" alt="" class="zhejiang">
            <img src="../images/map/shanghai.png" alt="" class="shanghai">
            <img src="../images/map/guangdong.png" alt="" class="guangdong">
            <img src="../images/map/fujian.png" alt="" class="fujian">
            <img src="../images/map/hainan.png" alt="" class="hainan">
            <img src="../images/map/taiwan.png" alt="" class="taiwan">
        </div>
        <div id="logins">
            <div class="logins-top">
                <img class="logo" src="../images/logo.png" alt="">
                <span>联盟商家管理系统</span>
            </div>
            <div class="logins-s logins-b">
                <img src="../images/peo.png" alt="">
                <input type="text" v-model.trim="account" placeholder="请输入登录账号">
            </div>
            <div class="logins-s logins-b">
                <img src="../images/pas.png" alt="">
                <input type="password" v-model.trim="password" placeholder="请输入您的密码">
            </div>
            <div class="logins-s" v-show="inputCodes">
                <div class="fl scan logins-b">
                    <img src="../images/ema.png" alt="">
                    <input type="text" v-model.trim="code" id="inputCode" placeholder="请输入您的验证码">
                </div>
                <div class="fr scans logins-b mycode" id="code" >
                    <img :src=codeUrl alt=""  @click="changeCode()" >
                </div>
            </div>
            <div class="logins-s logins-ch">
                <el-checkbox v-model="checked">记住密码</el-checkbox>
                <router-link :to="{ path: 'findpassword' }">
                    <div class="fr">忘记密码?</div>
                </router-link>
            </div>
            <div class="logins-s">
                <el-row>
                    <el-button id='submit' @click="login()">登录</el-button>
                </el-row>
            </div>
            <router-link :to="{ path: 'reg' }">
                <div class="login-reg">
                    还没有账号？立即注册
                </div>
            </router-link>
        </div>
    </div>
</template>


<script>
import { canvasTxt, loginBj } from "../../../static/js/login.js";
import md5 from "js-md5";
export default {
  data() {
    return {
      account: "",
      password: "",
      code: "",
      checked: true,
      inputCodes: false, //是否显示验证码
      codeUrl: ""
    };
  },
  methods: {
    login() {
      let _this = this;
      if (_this.account == "") {
        _this.$message({
          showClose: true,
          message: "请输入账号",
          type: "error"
        });
        return false;
      }
      if (_this.password == "") {
        _this.$message({
          showClose: true,
          message: "请输入密码",
          type: "error"
        });
        return false;
      }
      if (this.inputCodes) {
        if (_this.code == "") {
          _this.$message({
            showClose: true,
            message: "请输入验证码",    
            type: "error"
          });
          return false;
        }
      }
      _this.$http
        .post(_this.urls + "/adm/login", {
          username: _this.account,
          password: md5(_this.password),
          verify_code: _this.code
        })
        .then(function(res) {
          let data = res.data;
          if (data.code == "1") {
              localStorage.setItem("uid", data.data.user.id);
              localStorage.setItem("token", data.data.user.token.access_token); //设置access_token
              localStorage.setItem(
                "reToken",
                data.data.user.token.refresh_token
              ); //设置refresh_token
              localStorage.setItem("time", data.data.user.token.expire_time); //记录token的有效时间
              localStorage.setItem("nowTime", new Date().getTime() / 1000); //记录当前登录的时间
              localStorage.setItem("nowTimes", new Date().getTime() / 1000); //记录当前登录的时间 用于判断用户是否操作 大于半个小时直接去登录
              _this.$router.push("/homepage");
          } else if(data.code == "0") {
            _this.$message({
              showClose: true,
              message: data.msg,
              type: "error"
            });
          }else{
              _this.$message({
              showClose: true,
              message: data.msg,
              type: "error"
            });
             _this.inputCodes = true;
            _this.codeUrl = _this.urls + "/adm/verify/make/" + _this.account;
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    changeCode() {
      let _this = this;
      _this.codeUrl =
        _this.urls + "/adm/verify/make/" + _this.account + "?" + Math.random();
    }
  },
  mounted() {
    canvasTxt();
    loginBj();
  }
};
</script>
<style lang="less">
@import "login.less";
</style>

